<template>
  <div ref="page"
    @drop.prevent="bug"
    @dragover.prevent
    class="main"
    id="container"
    >

    <!-- <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;"> -->
      <!-- <vue-draggable-resizable :w="200" :h="100" @dragging="onDrag" @resizing="onResize" :parent="true">
        <p>Hello!<br>
        X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
      </vue-draggable-resizable> -->
    <!-- </div> -->
    <vue-draggable-resizable v-for="item in 5" :key="item" :w="200" :h="100" @dragging="onDrag" @resizing="onResize" :parent="true">
        input
      </vue-draggable-resizable>


      <!-- <div id="container"></div> -->
    <!-- <div v-for="(item, index) in domTree" :key="index" v-html="item.element" 
    :style="[{width:item.width},{height: item.height},{background: item.background}, {color: item.color}]"></div> -->
  </div>
</template>

<script>
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
import { mapMutations } from 'vuex'
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

var snabbdom = require('snabbdom');
var patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class').default, // makes it easy to toggle classes
  require('snabbdom/modules/props').default, // for setting properties on DOM elements
  require('snabbdom/modules/style').default, // handles styling on elements with support for animations
  require('snabbdom/modules/eventlisteners').default, // attaches event listeners
]);
var h = require('snabbdom/h').default; // helper function for creating vnodes


export default {
  name: 'Page',
  props: {
    msg: String
  },
  components: {
  },
  data() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      container: null,
      dom: {
        sel: 'div#container.main',
        data: {
        },
        children: [
          {
            sel: 'div.red',
            data: {
              class: {

              },
              style: {
                width: '100px',
                // position: 'absolute',
                float: 'right',
                marginLeft: '100px',
                height: '100px',
                border: '1px solid red',
                userSelect: 'auto',
                zIndex: 'auto',
                // top: '160px',
                // left: '500px'
              },
              on: {
                // touchstart: function(e) {
                //   console.log(e)
                // },
             
                click: function(e) {
                  console.log(this)
                  // e.x = 100
                }
              }
            },
            children: []
          }
        ]
      }
    }
  },
  mounted(){
    this.container = document.getElementById('container');
    patch(this.container, this.dom);
  },
  methods: {
      onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    },
      allowDrop(e) {
          e.preventDefault();
      },
      appendElement(vdata, className, element) {
        for(var i in vdata) {
            const classList = vdata.sel.split('.')
            if (classList.find(item => item == className)) {
                if (i == 'children') {
                  vdata[i].push(element)
                }
            }
            if (i == 'children') {
              vdata[i].map(item => {
                  this.appendElement(item, className, element)
                })
            }
           
          
        }
      },
      bug(e) {
            const element = JSON.parse(e.dataTransfer.getData('text/plain'))
            // this.domTree[JSON.parse(e.dataTransfer.getData('text/plain')).name] = e.dataTransfer.getData('text/plain')
            // Vue.set(this.domTree, JSON.parse(e.dataTransfer.getData('text/plain')).name, JSON.parse(e.dataTransfer.getData('text/plain')))
            // this.$ls.set('domTree', this.domTree)
            const io = {
              sel: '',
              data: {

              },
              children: []
            };
            io.sel = element.type;
            io.data.style = element.style;
            // console.log(this.dom, e.target.className, io)
            this.appendElement(this.dom, e.target.className, io)
            // console.log(this.dom.children[0]);
            // this.dom.children[0].children.push(io)
            this.container.innerHTML  = ''
            patch(this.container, this.dom);
            
      },
      drop(e) {
          // var data=e.dataTransfer.getData("Text");
          //   e.target.appendChild(document.getElementById(data));
          //   e.preventDefault();
          console.log(e);
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
    width: 800px;
    height: 450px;
    border: 3px solid #eeeeee;
    overflow: auto;
    position: relative;
}
</style>
